{extend name="base2" /}
{block name="body"}
<style>
    .container-fluid {
        padding: 20px;
    }
    .box {
        margin-bottom: 20px;
        float: left;
        width: 220px;
    }
    .box img {
        max-width: 100%
    }

    .layui-layout-admin .layui-body{
        top:0;
        bottom:0;
        left:0;
    }

    .spd-button{
        position: fixed;top:0;left:0;z-index: 999;width:100%;background-color:#fff;text-align:right;
    }
</style>
<div class="layui-body" id="iframe-body">
    <!--tab标签-->
    <div class="layui-tab layui-tab-brief">
        <div class="layui-tab-content">

            <form class="layui-form layui-form-pane" action="{:url('admin/suit/suit_img')}" method="get">
                <div class="layui-inline">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-inline">
                        <select name="cid">
                            <option value="0">全部</option>
                            {foreach name="imgcategory_level_list" item="vo"}
                            <option value="{$vo.id}" {if condition="$cid==$vo.id"} selected="selected"{/if}>{neq name="vo.level" value="1"}|{php}for($i=1;$i<$vo['level'];$i++){echo ' ----';}{/php}{/neq} {$vo.name}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn">搜索</button>
                </div>
                <div class="layui-inline" id="spd" style="float: right;">
                    <a href="javascript:void(0);" class="layui-btn" style="margin:0 30px;" onclick="closeIframe();">确认</a>
                </div>
            </form>
            <hr>

            <form action="" method="post" class="ajax-form">
                <div id="masonry" class="container-fluid">
                    {foreach name="img_list" item="vo"}
                    <div class="box" style="position:absolute;cursor:pointer;overflow: hidden;">
                        <img style="width:100%;" src="{$vo.path}" alt="">
                        <div class="operation" data-type="0" style="position:absolute;width: 100%;height:200px;top: 0;color: #fff;padding: 7px 0;text-align:center;background: rgba(0,0,0,0.5);display:none;line-height: 136px;">已选择</div>
                    </div>
                    {/foreach}
                </div>
                <div id="hidden"></div>
            </form>
        </div>
        {$img_list->render();}
    </div>
</div>
{/block}
{block name="js"}
<script src="__JS__/masonry-docs.min.js"></script>
<script>

    $(document).ready(function(){
        window.jsonObj = [];        
        $('.box').click(function(){
            var type = $(this).children('.operation').attr('data-type');
            if(type == 1){
                $(this).children('.operation').css('display','none');
                $(this).children('.operation').attr('data-type',0);
                var url = $(this).children('img').attr('src');
                for(var i = 0;i < window.jsonObj.length;i++){
                    if(window.jsonObj[i] == url){
                        window.jsonObj.splice(i,1);
                    }
                }
            }else{
                $(this).children('.operation').css('display','inline-block');
                $(this).children('.operation').attr('data-type',1);
                var url = $(this).children('img').attr('src');
                window.jsonObj.push(url);
                // photo_list_item += '<div class="photo-list"><input type="text" name="photo[]" value="' + url + '" class="layui-input layui-input-inline">';
                // photo_list_item += '<button type="button" class="layui-btn layui-btn-danger remove-photo-btn">移除</button></div>';
                // parent.$('#photo-container').append(photo_list_item);               
            }
        });

        $('#iframe-body').scroll(function(){
            if($('#iframe-body').scrollTop() > 100){
                $('#spd').addClass('spd-button');
                $('#spd button').css({'margin':'10px 30px'});
            }else{
                $('#spd').removeClass('spd-button');
                $('#spd button').css({'margin':'0 30px'});
            }
        });
    });


    function closeIframe(){
        var photo_list_item = '';
        for(var j = 0;j < window.jsonObj.length;j++){
                photo_list_item += '<div class="photo-list"><input type="text" name="photo[]" value="' +  window.jsonObj[j] + '" class="layui-input layui-input-inline">';
                photo_list_item += '<button type="button" class="layui-btn layui-btn-danger remove-photo-btn">移除</button></div>';
        }
        parent.$('#photo-container').append(photo_list_item); 
        parent.layer.closeAll();
    }


    $(function() {
        var $container = $('#masonry');
        $container.imagesLoaded(function() {
            $container.masonry({
                    itemSelector: '.box',
                    gutter: 20,
                    isAnimated: true,
                });
        });
    });
</script>
{/block}